/*4.26 popover 效果
	Name:			mod_popover
*/

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: left;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    >.arrow,
    >.arrow:after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }
    >.arrow {
        border-width: 11px;
        &:after {
            content: "";
            border-width: 10px
        }
    }
    .popover-title {
        padding: 8px 14px;
        margin: 0;
        font-size: 14px;
        background-color: #f7f7f7;
        border-bottom: 1px solid #ebebeb;
        border-radius: 5px 5px 0 0
    }
    .popover-content {
        padding: 9px 14px
    }

    &.top {
        margin-top: -10px;
        >.arrow {
            bottom: -11px;
            left: 50%;
            margin-left: -11px;
            border-top-color: #999;
            border-top-color: rgba(0, 0, 0, .25);
            border-bottom-width: 0;
            &:after {
                bottom: 1px;
                margin-left: -10px;
                content: " ";
                border-top-color: #fff;
                border-bottom-width: 0
            }
        }
    }
    &.right {
        margin-left: 10px;
        >.arrow {
            top: 50%;
            left: -11px;
            margin-top: -11px;
            border-right-color: #999;
            border-right-color: rgba(0, 0, 0, .25);
            border-left-width: 0;
            &:after {
                bottom: -10px;
                left: 1px;
                content: " ";
                border-right-color: #fff;
                border-left-width: 0
            }
        }
    }
    &.bottom {
        margin-top: 10px;
        >.arrow {
            top: -11px;
            left: 50%;
            margin-left: -11px;
            border-top-width: 0;
            border-bottom-color: #999;
            border-bottom-color: rgba(0, 0, 0, .25);
            &:after {
                top: 1px;
                margin-left: -10px;
                content: " ";
                border-top-width: 0;
                border-bottom-color: #fff
            }
        }
    }
    &.left {
        margin-left: -10px;
        >.arrow {
            top: 50%;
            right: -11px;
            margin-top: -11px;
            border-right-width: 0;
            border-left-color: #999;
            border-left-color: rgba(0, 0, 0, .25);
            &:after {
                right: 1px;
                bottom: -10px;
                content: " ";
                border-right-width: 0;
                border-left-color: #fff
            }
        }
    } 
}